import React from 'react';
import { intl } from '@/utils';
import Popup from 'devextreme-react/popup';
import { useState } from 'react';
import "./index.less";
import notify from 'devextreme/ui/notify';
import { CloseOutlined } from '@ant-design/icons';
import { CpasIcon } from '~/public/cpas-ui';

// 显示对话框参数
export interface AudDialogShowParams {
  args: any, // 打开对话框参数
  okCallback?: (e?: any, Title?: string) => void; // OK按钮回调
  onCancel?: () => void;
  onHiding?: () => void;
}
export interface AudDialogProps {
  onOK: (v: string, tag?: any) => void;
  onCancel?: () => void;
}
export interface SizeProp {
  width?: number | string,
  height?: number | string,
}

const AudDialog: React.FC<any & AudDialogProps> = React.forwardRef((props: any & AudDialogProps, ref) => {
  const { onOK, onCancel, width, height, ...restProps } = props;
  const [size, setSize] = useState<SizeProp>({ width, height });
  const [openVisible, setOpenVisible] = useState<boolean>(false);



  return (
    <>
      <Popup
        {...restProps}
        ref={ref}
        minWidth={300}
        minHeight={200}
        {...size}
        // dragOutsideBoundary={true}
        resizeEnabled={true}
        onResizeEnd={(e) => {
          setSize({ width: e.width, height: e.height });
        }}
        fullScreen={openVisible}
        titleComponent={() => <>
          <div style={{ display: 'flex', height: 36, justifyContent: "space-between", alignItems: "center" }}>
            <span style={{ fontSize: '16px', fontWeight: 600 }} >{restProps?.title}</span>

            <div style={{ display: 'flex', alignItems: 'center', justifyContent: "flex-end", cursor: 'pointer' }}>
              {restProps?.showzuidahuaButton &&
                <div id='colseBtnBox' style={{ marginRight: 8 }} title={openVisible ? "还原" : "最大化"} onClick={() => {
                  setOpenVisible(!openVisible);
                }}>
                  {openVisible ? <CpasIcon type='icon-zuidahua ' fontSize={16} /> : <CpasIcon type='icon-suoxiao' fontSize={16} />}
                </div>
              }
              {restProps?.showCloseButton !== false ?
                <div id='audDialogColseBtn' onClick={() => {
                  if (restProps?.onHiding) {
                    restProps.onHiding();
                  } else {
                    if (onCancel) {
                      onCancel();
                    } else {
                      notify('关闭弹窗失败', 'error', 3000)
                    }
                  }

                }}>
                  <CloseOutlined style={{ fontSize: 18 }} />
                </div> : <div> </div>}
            </div>

          </div>
        </>}
        // ScrollView={{
        //   width:'100%',
        //   height:'100%',
        //   direction :"both"
        //   }
        // }
        toolbarItems={
          restProps?.showCancelButton && restProps?.showOkButton && [
            {
              widget: 'dxButton',
              toolbar: 'bottom',
              location: 'after',
              visible: restProps?.showCancelButton ?? true,
              options: {
                text: intl('pub.cancel', '取消'),
                onClick: () => onCancel(),
              },
            },
            {
              widget: 'dxButton',
              toolbar: 'bottom',
              location: 'after',
              visible: restProps?.showOkButton ?? true,
              options: {
                text: intl('pub.ok', '确定'),
                type: 'default',
                onClick: () => onOK(),
              },
            },
          ]}
      />
    </>
  );
});

export default AudDialog